<template>
  <i :class="'iconfont '+ iconName" v-if="iconType === 'icon'"
     :style="{color: isStyle ? systemInfo.theme : isColor,fontSize:iconSize+'px'}"
     @click.stop="handleClick"
     @mousedown.stop="handleMouseDown"
     @mouseup.stop="handleMouseUp"
  ></i>
  <svg v-else aria-hidden="true" class="icon" :style="{fill:systemInfo.theme,height:svgHeight+'px',width:svgWidth+'px'}" >
    <use :xlink:href="`#icon-${iconName}`"></use>
  </svg>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "CommonIcon",
  props: {
    iconType: {
      type: String,
      default: "icon"
    },
    iconName: {
      type: String,
      default: null
    },
    isStyle: {
      type: Boolean,
      default: false,
    },
    isColor:{
      type:String,
      default:'#333333'
    },

    iconSize: {
      type: Number | String,
      default: 14
    },
    svgHeight:{
      type: Number | String,
      default: 14
    },
    svgWidth:{
      type: Number | String,
      default: 14
    },

  },
  computed: {
    ...mapGetters(["systemInfo"]),
  },
  data() {
    return {
      type: 'icon',
    }
  },
  mounted() {

  },
  methods: {
    handleClick(){
        this.$emit('click')
    },
    handleMouseDown(){
      this.$emit('mousedown')
    },
    handleMouseUp(){
      this.$emit('mouseup')
    }
  }
}
</script>

<style scoped>

</style>
